 <template>
 <!--分页 begin-->
 <div style="padding:10px 20px;" class="overflowY">
   <div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
     <base-card title="直播活动" >
       <el-row :gutter="20" slot="header-right">
         <el-col :span="4" :offset="20">
           <div class="btnFloatCenter">
             <el-button type="primary" size="small">创建活动</el-button>
           </div>
         </el-col>
       </el-row>
     </base-card>
   </div>
   <base-card title="说明" >
     <code>
       <span style="width: 100%;display: inline-block;">1、按钮位置通过栅格来控制，多个按钮增加多个el-col即可</span>
       <span style="width: 100%;display: inline-block;">/2、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
     </code>
   </base-card>
   <base-card title="HTML" >
     <pre><code>  &lt;div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"&gt;<br>     &lt;base-card title="直播活动" &gt;<br>       &lt;el-row :gutter="20" slot="header-right"&gt;<br>         &lt;el-col :span="4" :offset="20"&gt;<br>           &lt;div class="btnFloatCenter"&gt;<br>             &lt;el-button type="primary" size="small"&gt;创建活动&lt;/el-button&gt;<br>           &lt;/div&gt;<br>         &lt;/el-col&gt;<br>       &lt;/el-row&gt;<br>     &lt;/base-card&gt;<br>  &lt;/div&gt;</code></pre>
   </base-card>
   <base-card title="JS" >
     <pre><code><p>import BaseCard from '@/components/BaseCard/BaseCard'<br>export default {<br>  components: {<br>    BaseCard<br>  }<br>}</p></code></pre>
   </base-card>
   <base-card title="CSS" >
     <pre><code>&lt;style scoped&gt;<br>  .btnFloatCenter{<br>    width: 100%;<br>    text-align: center;<br>    transform: translateY(3%);<br>  }<br>  .btnFloatLeft{<br>    width: 100%;<br>    text-align: left;<br>    transform: translateY(3%);<br>  }<br>  .btnFloatRight{<br>    width: 100%;<br>    text-align: right;<br>    transform: translateY(3%);<br>  }<br>&lt;/style&gt;</code></pre>
   </base-card>
 </div>
 <!--分页 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  components: {
    BaseCard
  }
}
</script>
 <style scoped>
   .btnFloatCenter{
     width: 100%;
     text-align: center;
     transform: translateY(3%);
   }
   .btnFloatLeft{
     width: 100%;
     text-align: left;
     transform: translateY(3%);
   }
   .btnFloatRight{
     width: 100%;
     text-align: right;
     transform: translateY(3%);
   }
 </style>

